function Index() {
    if (!(this instanceof Index)) {
        return new Index();
    }
    this.init();
}

Index.prototype = {
    wsServer: 'ws://118.31.76.146:50009', // 数据包接口
    websocket: null,
    id: null, // 当前线程id
    userData: null,
    userBox: null,
    dialogBox: null,
    adminInfo: null,
    msgInfo: null,
    init: function() {
        var _this = this;
        _this.msgInfo = { token: _global.token,uid: 0,nickname: _global.nickname,site_id: _global.site_id,event:'reply',content: '',type: 'text'};
        // 初始化websokect
        _this.adminInfo = { token: _global.token,uid: _global.id,site_id: _global.site_id,nickname: _global.nickname,event: 'query',content: 'init'};
        _this.wsInit();

        // 初始化dom对象
        _this.userBox = $('#j-sidebar dl');
        _this.dialogBox = $('#j-dialog');
        
        // 渲染页面
        _this.render();
        _this.uploadInit();
    },
    render: function(res) {
        var _this = this;

        // 初始化在线用户
        $.ajax({
            url: '/admin/get_client_users',
            method: 'get',
            success: function(res) {
                console.log(JSON.parse(res));
                _this.userData = JSON.parse(res);
                var html = template('tpl-user',{ data: _this.userData });
                _this.userBox.append(html);

                if (_this.userData.length) {
                    var d = {uid: _this.userData[0].uid,name: _this.userData[0].nickname};
                    _this.dialogRender(d);
                    _this.dialogSwitch(d);
                    _this.historyMsg(d);
                }
            }
        });


        _this.handle();

    },
    handle: function(res) {
        var _this = this;

        // 切换聊天面板
        $('#j-sidebar').on('click','dt',function() {
            $(this).addClass('active').siblings('dt').removeClass('active');
            $(this).find('.tip').removeClass('active');
            $('#j-sidebar').find('.headimg').removeClass('ani-scale');
            $(this).find('.headimg').addClass('ani-scale');

            var id = $(this).data('id'),
                name = $(this).data('name');

            var d = {uid: id,name: name};

            if ($(this).hasClass('loaded')) {
                // 已经加载过
                _this.dialogSwitch(d);
                
            } else {
                // 没有加载过
                _this.dialogRender(d);
                $(this).addClass('loaded');
                _this.dialogSwitch(d);
                _this.historyMsg(d);
            }
        })

        // 发送文本消息
        $('#j-sub').on('click',function() {
            var msg = $('#j-content').val();
            if (msg) {
                _this.sendMsg(msg,'text');
                $('#j-content').val('');
            }
        })

    },
    // 初始化图片上传，自动发送
    uploadInit: function() {
        var _this = this;
        // 上传准备
        var uploader = WebUploader.create({
            auto: true, //开启自动上传
            fileVal: 'image',
            formData: {
                access_token:'',
                app_key: '',
            },
            swf: 'Uploader.swf',
            server: '/upload',
            pick: '#j-picker',
            // 只允许选择图片文件。
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/jpg,image/jpeg,image/png'
            },
            method:'post',
        })
        // 开始上传
        uploader.on('startUpload', function(file) {
            //$.loadShow();
        });
        // 结束上传
        uploader.on('uploadFinished', function(file) {
            //$.loadOver();
        });                
        // 上传成功 
        uploader.on('uploadSuccess', function(file, res) {
            console.log(res);
            if (res.ret == 0) {
                _this.sendMsg(res.data.path,'image');
            }
        });          
        // 上传失败 
        uploader.on('uploadError', function(file, res) { 
            console.log(res);
        });    
    },
    // 新增聊天面板
    dialogRender: function(d) {
        var _this = this;

        var html = template('tpl-dialog',d);
        _this.dialogBox.prepend(html);

        $('#j-dialog-'+d.uid).hide();
    },
    // 切换聊天面板
    dialogSwitch: function(d) {
        var _this = this;

        $('.dialog-scroll').hide();
        $('#j-dialog-'+d.uid).show();
        _this.nameSwich(d.name);

        _this.msgInfo.uid = d.uid;
    },
    // 切换当前显示用户信息
    nameSwich: function(name) {
        $('#j-nickname').html(name);
    },
    // 初始化websocket
    wsInit: function() {
        var _this = this;

        _this.websocket = new WebSocket(_this.wsServer); //创建WebSocket对象
        //已经建立连接
        _this.websocket.onopen = function (res) {
            //console.log('与服务端连接建立');
            // 初始化用户登录
            _this.websocket.send(JSON.stringify(_this.adminInfo));
        };
        //已经关闭连接
        _this.websocket.onclose = function (res) {
            //console.log('与服务端连接关闭');
        };
        //收到服务器消息
        _this.websocket.onmessage = function (res) {
            //console.log('接收到消息');
            var d = JSON.parse(res.data);
            console.log(d);
            if (d.ret == 0) {
                 _this.recMsg(d.data);
            } else {
                alert(d.msg);
            }
            
        };
        //产生异常
        _this.websocket.onerror = function (res) {
            alert('连接异常');
        }; 

    },
    // 接受到消息
    recMsg: function(d) {
        var _this = this;

        console.log(d);
        if (d.token) {
            if ($('#j-user-'+d.uid).size()) {

            } else {
                console.log('新增用户');
                _this.addUser(d);
                _this.dialogRender(d);
            }

            _this.msgRender(d);
        }
        
    },
    // 新增左侧用户列表
    addUser: function(d) {
        var _this = this;

        if ($('#j-nouser').size()) {
            $('#j-nouser').remove();
        }
        var html = template('tpl-add-user',d);
        _this.userBox.append(html);

        $('#j-user-'+d.uid).find('.headimg').addClass('ani-scale');
        $('#j-user-'+d.uid).find('.tip').addClass('active');
    },
    // 获取历史消息 20条
    historyMsg: function(d) {
        var _this = this;

        $.ajax({
            url: '/admin/get_history_log',
            method: 'get',
            data: {
                uid: d.uid
            },
            success: function(res) {
                var data = JSON.parse(res);
                var html = '',
                    tplID = '';
                for (var i = data.length-1; i >= 0; i--) {
                    if (data[i].event == 'reply') {
                        tplID = 'tpl-msg-sender';
                    } else {
                         tplID = 'tpl-msg-fromer';
                    }
                    html += template(tplID,data[i]);
                }
                html += '<div class="msg-line">历史消息</div>';
                $('#j-dialog-'+d.uid).prepend(html);
                _this.scrollBottom(d.uid);
            }
        });
    },
    // 聊天面板滚动到底部
    scrollBottom: function(id) {

        var h = $('#j-dialog-'+id)[0].scrollHeight;
        $('#j-dialog-'+id).animate({'scrollTop':h});
    },
    // 移除聊天用户
    removeUser: function(d) {
        $('#j-user-'+d.uid).remove();
        $('#j-dialog-'+d.uid).remove();
    },
    // 新消息渲染到面板
    msgRender: function(d) {
        var _this = this;

        var html = template('tpl-msg-fromer',d);
        $('#j-dialog-'+d.uid).append(html);

        if ($('#j-user-'+d.uid).hasClass('active')) {

        } else {
            $('#j-user-'+d.uid).find('.headimg').addClass('ani-scale');
            $('#j-user-'+d.uid).find('.tip').addClass('active');
        }
    },
    // 发送消息
    sendMsg: function(msg,type) {
        var _this = this;

        _this.msgInfo.content = msg;
        _this.msgInfo.type = type;
        console.log(_this.msgInfo);
        _this.websocket.send(JSON.stringify(_this.msgInfo));

        var html = template('tpl-msg-sender',_this.msgInfo);
        $('#j-dialog-'+_this.msgInfo.uid).append(html);
        _this.scrollBottom(_this.msgInfo.uid);
    }
};

$(function() {
    new Index();
});
